<template>
	<div class="detail-header">
		<div class="navbar">
			<div class="nav">
				<div class="nav-left">
					<router-link to="/">首页</router-link>
					<router-link to="/a">二手房</router-link>
					<router-link to="/b">新房</router-link>
					<router-link to="/list">租房</router-link>
					<router-link to="/c">商业办公</router-link>
					<router-link to="/d">小区</router-link>
					<router-link to="/e">问答</router-link>
					<router-link to="/f">工具</router-link>
					<router-link to="/publish">发布房源</router-link>
				</div>
				<div class="nav-right">
					<div v-show="!phone">
						<a href=""><img src="../assets/user_icon.png" alt=""></a>
						<router-link to="/login">登录</router-link>
						<span>
						/
						</span>
						<router-link to="/register" style="margin-right: 20px;">注册</router-link>
						<span>热线电话1010-9666</span>
					</div>
					<div v-show="phone">
						<a href=""><img src="../assets/user_icon.png" alt=""></a>
						<router-link to="/percenter">{{phone}}</router-link>
						<span>
						/
						</span>
						<router-link to="/register" style="margin-right: 20px;" @click="updatePhone('')">退出</router-link>
						<span>热线电话1010-9666</span>
					</div>
				</div>
			</div>
		</div>
		 <!-- 二级导航 -->
    <div class="search_area">
      <div class="beike_nav">
        <div class="nav-tap">
          <el-menu background-color="#f5f5f6" :default-active="activeIndex2" mode="horizontal">
            <el-menu-item index="1">
              <a href="租房列表"><i></i></a>
            </el-menu-item>
            <el-menu-item index="2"><router-link to="/">首页</router-link></el-menu-item>
            <el-menu-item index="3"><a>整租</a></el-menu-item>
            <el-menu-item index="4"><a>合租</a></el-menu-item>
            <el-menu-item index="5"><router-link to="/publish">发布房源</router-link></el-menu-item>
            <el-menu-item index="7">
              <el-popover placement="bottom" trigger="hover" style="position: absolute; top: 4px;">
                <div class="weixin_click">
                  <img src="../assets/img/lsm_index_22.png" height="120px" />
                </div>
                <el-menu-item index="6" slot="reference">
                  下载APP
                </el-menu-item>
              </el-popover>
            </el-menu-item>
          </el-menu>
          
        </div>
        <div class="search" id="search">
          <div class="search_wrap">
            <input
              class="search__input"
              placeholder="请输入区域、商圈或小区名开始找房"
              style="height: 44px"
            />
            <i class="el-icon-search"></i>
            <div class="sug-search" style="display: none"></div>
          </div>
        </div>
      </div>
    </div>
	</div>
</template>

<script>
import { mapMutations, mapState } from 'vuex'
export default {
  data() {
    return {
      activeIndex2: "",
    }
  },
	computed:{
		...mapState(["phone"]),
	},
	methods: {
		...mapMutations(["updatePhone"]),
	},
};
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}
.navbar {
  background-color: #333;
  height: 50px;
  width: 100vw;
  color: #a9abab;
}
.navbar .nav {
  width: 1150px;
  margin: 0 auto;
}
.navbar .nav .nav-left {
  float: left;
}
.navbar .nav .nav-left a {
  text-decoration: none;
  line-height: 50px;
	margin-right: 1.5rem;
  color: #a9abab;
}
.navbar .nav .nav-left a:hover {
  color: #fff;
  cursor: pointer;
}
.navbar .nav .nav-right {
  color: #fff;
  float: right;
	height: 50px;
}
.navbar .nav .nav-right>div{
	line-height: 50px;
	display: flex;
}
.navbar .nav .nav-right>div>a>img{
	width: 15px;
	height: 15px;
	margin-top: 18px;
	margin-right: 5px;
}
.navbar .nav .nav-right a {
  color: #fff;
	text-decoration: none;
}
/* 二级导航 */
.search_area {
  width: 100%;
  height: 155px;
  padding: 25px 0;
  background: #f5f5f6;
  box-sizing: border-box;
}
.beike_nav {
  width: 1150px;
  margin: 0 auto;
}
.beike_nav .nav-tap{
  height: 30px;
  display: flex;
}
.nav-tap .el-menu a i{
  display: inline-block;
  width: 88px;
  height: 30px;
  background: url('../assets/img/detail/meng_sprite_BAK2.png') no-repeat;
  background-position: -375px -235px;
  margin-right: 20px;
}
.nav-tap .el-menu--horizontal>.el-menu-item {
  height: 38px;
  color: #000;
  font-size: 15px;
  margin-right: 30px;
  font-weight: bold;
}
.nav-tap .el-menu-item:hover {
  background-color: #f5f5f6 !important;
  color: #000  !important;
}
.nav-tap .el-menu-item.is-active {
  background-color: #f5f5f6 !important;
  color: #00ae66  !important;
  border-bottom: 2px solid #00ae66;
}
.search{
  margin-top: 30px;
  width: 700px;
  background-color: #fff;
}
.search div input{
  width: 668px;
  border: 0;
  height: 44px;
  padding-left: 18px;
  box-sizing: border-box;
  font-size: 13px;
}
.el-icon-search{
  font-size: 15px;
  line-height: 44px;
  text-align: center;
  color: #6668;
}
</style>
<style scoped src="../assets/css/reset.css"></style>